<template>
    <div>
        <p class="title"><span>双击</span>左边节点选择"<span>设备组</span>"，<span>单击</span>右边节点选择"<span>设备</span>"</p>
        <div class="row equipDetail">
            <ul class="col-sm-6">
                <li @click="equipGroup($event, dealer)" @dblclick="group(dealer)" v-for="dealer in dealers">
                    <span class="nameCircle">{{ dealer.userNickname.substr(0,1) }}</span>
                    <span class="name">{{ dealer.userNickname }}</span>
                </li>
            </ul>
            <ul class="col-sm-5">
                <li @click="getEquip(equip)" v-for="equip in equips">
                    <span class="nameCircle">{{ equip.equipName.substr(0,1) }}</span>
                    <span class="name">{{ equip.equipName }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                dealers: [],
                equips: [],
                currentChoose: '', // 保存当前选中的经销商或者设备
            }
        },
        methods: {
            // 左边客户单击得到右边设备
            equipGroup (e, user) {
                e.stopPropagation()
                let params = {
                    dealerId: user.id,
                    pageSize: 100,
                }
                this.$ajax
                    .equip
                    .getEquip(params)
                    .then(res => {
                        let data = res.data
                        if (data.code === 200) {
                            this.equips = data.result.content
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 左边客户双击返回选中客户
            group (user) {
                this.$emit('getGroup', {value: user.userNickname, id: user.id})
            },
            getEquip (equip) {
                this.$emit('getEquip', equip)
            }
        },
        mounted () {
            let timer = setInterval(() => {
                if (this.$store.state.adminInfo) {
                    clearInterval(timer)
                    let id = this.$store.state.adminInfo.id
                    this.$ajax
                        .report
                        .getAllDealer(id)
                        .then(res => {
                            let data = res.data
                            if (data.code === 200) {
                                this.dealers = data.result
                            } else if (data.code === 408) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                                let timer = setTimeout(() => {
                                    clearTimeout(timer)
                                    $('#msgModal').modal('hide')
                                    this.$router.push({path: '/login'})
                                }, 2000)
                            } else {
                                this.$store.commit('showAlert', {error: data.msg})
                            }
                        }, () => {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                        })
                }
            }, 1)
        }
    }
</script>

<style scoped>
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ul li {
        height: 0.3rem;
        line-height: 0.3rem;
    }

    .title span {
        color: #FF6F47;
    }

    .equipDetail {
        height: 320px;
    }

    .equipDetail ul {
        height: 100%;
        overflow-Y: scroll;
    }

    .equipDetail li {
        padding-left: 20px;
        cursor: pointer;
    }

    .equipDetail li .nameCircle {
        border: 1px solid #D0B49F;
        border-radius: 50%;
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #D0B49F;
        white-space: nowrap;
    }

    .equipDetail li .name {
        display: inline-block;
        padding: 0 10px;
    }

    .equipDetail .col-sm-5 li .name {
        width: 80%;
    }

    .equipDetail li:hover .name {
        background: #17D29C;
        color: #fff;
        border-radius: 4px;
    }
</style>
